import React,{useState} from "react"
import TodoAdd from "./TodoAdd"
import TodoContext from "./TodoContext"
import './Todo.css'

function Todo(){
    const [todos, setTodos] = useState([
        {
            id: 1,
            complated: true,
            text: "11111",
        },
        {
            id: 2,
            complated: false,
            text: "222",
        },
        {
            id: 3,
            complated: true,
            text: "4444",
        },
    ]);

    function addTodo(text){
        // console.log(Date.now())
        if(!text.length) return;
        console.log(todos)
        setTodos([...todos,{
            id:Date.now(),
            complated:false,
            text,
        },])
    }

    function todoToggle(id){
        setTodos(
            todos.map((todo)=>{
                if(todo.id === id){
                    return {...todo,complated:!todo.complated}
                }else{
                    return {...todo}
                }
            })
        );
    }
    
    function removeTodo(id){
        console.log(id);
        setTodos(
            todos.filter((todo)=>{
                return todo.id !== id;
            })
        );
    }

    return(
        <div className="todo">
            <TodoContext todos={todos} todoToggle={todoToggle} removeTodo={removeTodo}/>
            <TodoAdd addTodo={addTodo}/>
        </div>
    )
}
export default Todo